import React, {useEffect, useState, useRef} from 'react'
import {MoreOutlined, PlusOutlined} from '@ant-design/icons'
import {
    Button,
    Col,
    Flex,
    Form,
    Input,
    Row,
    Select,
    Typography,
    Table,
    Modal,
    Switch,
    Space,
    Divider,
    Dropdown
} from 'antd'
import MyDatePicker from '../components/MyDatePicker'
import {useNavigate} from 'react-router-dom'

export default function TagList() {
    const [isShow, setIsShow] = useState(false)
    const [isShow2, setIsShow2] = useState(false)
    const navigate = useNavigate()
    // 保存选择的日期
    const [selectedDateString, setSelectedDateString] = useState(null)
    const [form] = Form.useForm()
    const [form2] = Form.useForm()
    // 创建表单的引用
    const formRef = useRef()
    const formRef2 = useRef()
    // 模态框
    const [isModalOpen01, setIsModalOpen01] = useState(false)
    const [isModalOpen02, setIsModalOpen02] = useState(false)

    // 给我模拟10条标签数据，包含有标签id，标签名称，标签分组，创建时间，内容描述，启用状态
    const [tagList, setTagList] = useState([
        {
            id: 1,
            name: '旅行',
            group: '内容标签',
            createTime: '2023-01-01',
            description: '这是一个关于旅行的标签',
            status: true
        },
        {
            id: 2,
            name: '美食',
            group: '内容标签',
            createTime: '2024-04-21',
            description: '这是一个关于美食的标签',
            status: true
        },
        {
            id: 3,
            name: '购物',
            group: '内容标签',
            createTime: '2023-12-21',
            description: '这是一个关于购物的标签',
            status: false
        },
        {
            id: 4,
            name: '优惠',
            group: '活动标签',
            createTime: '2023-11-05',
            description: '这是一个关于优惠的标签',
            status: true
        },
        {
            id: 5,
            name: '活动',
            group: '活动标签',
            createTime: '2023-06-30',
            description: '这是一个关于活动的标签',
            status: false
        },
        {
            id: 6,
            name: '秒杀',
            group: '活动标签',
            createTime: '2023-01-01',
            description: '这是一个关于秒杀的标签',
            status: true
        }
    ])
    // 用于更新列表
    const [n, setN] = useState(1)

    useEffect(() => {
    }, [n])

    return (
        <>
            <Row className="info">
                <Col span={24}>
                    <Flex justify={'space-between'}>
                        <Typography.Title level={3}>信息管理</Typography.Title>
                        <Button
                            type="primary"
                            icon={<PlusOutlined/>}
                            onClick={() => {
                                // setIsModalOpen02(true)
                                navigate('/admin/tag/add')
                            }}
                        >
                            新增标签
                        </Button>
                    </Flex>
                </Col>
            </Row>
            <Row>
                <Col span={3}>
                    <div className="container" style={{marginRight: 0, height: '100%'}}>
                        <Space direction="vertical">
                            <Button
                                type="primary"
                                block
                                onClick={() => {
                                    setIsModalOpen02(true)
                                }}
                            >
                                新增分类
                            </Button>
                            <Input.Search placeholder="请输入搜索关键字"/>
                            <Flex
                                justify={'space-between'}
                                style={{
                                    padding: '5px 10px',
                                    borderRadius: 5,
                                    backgroundColor: '#EEE',
                                    position: 'relative'
                                }}
                            >
                <span
                    style={{cursor: 'pointer', color: '#666'}}
                    onClick={() => {
                        setIsShow(!isShow)
                    }}
                >
                  用户标签
                </span>
                                <PlusOutlined
                                    onClick={() => setIsModalOpen01(true)}
                                    style={{
                                        marginLeft: 24,
                                        fontSize: 10,
                                        position: 'absolute',
                                        right: 30,
                                        top: 9
                                    }}
                                />
                                <Dropdown
                                    trigger={['click']}
                                    menu={{
                                        items: [
                                            {
                                                label: '重命名',
                                                key: 'rename'
                                            },
                                            {
                                                label: '删除',
                                                key: 'delete'
                                            }
                                        ]
                                    }}
                                >
                                    <MoreOutlined/>
                                </Dropdown>
                            </Flex>
                            <Flex
                                vertical
                                style={{
                                    paddingLeft: '10px',
                                    lineHeight: '22px',
                                    display: !isShow && 'none'
                                }}
                            >
                                <span>旅游</span>
                                <span>美食</span>
                                <span>娱乐</span>
                            </Flex>
                            <Flex
                                justify={'space-between'}
                                style={{
                                    padding: '5px 10px',
                                    borderRadius: 5,
                                    backgroundColor: '#EEE',
                                    position: 'relative'
                                }}
                            >
                <span
                    style={{cursor: 'pointer', color: '#666'}}
                    onClick={() => {
                        setIsShow2(!isShow2)
                    }}
                >
                  内容标签
                </span>
                                <PlusOutlined
                                    onClick={() => setIsModalOpen01(true)}
                                    style={{
                                        marginLeft: 24,
                                        fontSize: 10,
                                        position: 'absolute',
                                        right: 30,
                                        top: 9
                                    }}
                                />
                                <Dropdown
                                    trigger={['click']}
                                    menu={{
                                        items: [
                                            {
                                                label: '重命名',
                                                key: 'rename'
                                            },
                                            {
                                                label: '删除',
                                                key: 'delete'
                                            }
                                        ]
                                    }}
                                >
                                    <MoreOutlined/>
                                </Dropdown>
                            </Flex>
                            <Flex
                                vertical
                                style={{
                                    paddingLeft: '10px',
                                    lineHeight: '22px',
                                    display: !isShow2 && 'none'
                                }}
                            >
                                <span>铁公鸡</span>
                                <span>羊毛党</span>
                                <span>购物狂</span>
                            </Flex>
                        </Space>
                    </div>
                </Col>
                <Col span={21}>
                    <Row className="container">
                        <Col span={24}>
                            <Form layout="inline" onFinish={() => {
                            }}>
                                <Form.Item label="标签名称：" name="storeName">
                                    <Input/>
                                </Form.Item>
                                <Form.Item label="启用状态：" name="storeAddress">
                                    <Select
                                        placeholder="状态选择"
                                        options={[
                                            {
                                                value: '',
                                                label: '全部'
                                            }
                                        ]}
                                    />
                                </Form.Item>
                                <Form.Item label="计算方式：" name="calc">
                                    <Select
                                        placeholder="方式选择"
                                        options={[
                                            {
                                                value: '',
                                                label: '全部'
                                            }
                                        ]}
                                    />
                                </Form.Item>
                                <Form.Item label="更新时间">
                                    <MyDatePicker
                                        selectedDateString={selectedDateString}
                                        setSelectedDateString={setSelectedDateString}
                                    />
                                </Form.Item>

                                <Form.Item>
                                    <Button type="default" htmlType="reset">
                                        重置
                                    </Button>
                                </Form.Item>
                                <Form.Item>
                                    <Button type="primary" htmlType="submit">
                                        查询
                                    </Button>
                                </Form.Item>
                            </Form>
                        </Col>
                    </Row>
                    <Row className="container">
                        <Col span={24}>
                            <Typography.Paragraph style={{fontSize: 16}}>
                                标签列表
                            </Typography.Paragraph>
                        </Col>
                        <Col span={24}>
                            <Table
                                rowKey="id"
                                dataSource={tagList}
                                columns={[
                                    {
                                        title: '标签ID',
                                        dataIndex: 'id',
                                        key: 'id'
                                    },
                                    {
                                        title: '标签名称',
                                        dataIndex: 'name',
                                        key: 'name'
                                    },
                                    {
                                        title: '标签分组',
                                        dataIndex: 'group',
                                        key: 'group'
                                    },
                                    {
                                        title: '创建时间',
                                        dataIndex: 'createTime',
                                        key: 'createTime'
                                    },
                                    {
                                        title: '内容描述',
                                        dataIndex: 'description',
                                        key: 'description'
                                    },
                                    {
                                        title: '状态',
                                        dataIndex: 'status',
                                        key: 'status',
                                        render: (_, record) => {
                                            return <Switch defaultChecked checked={record.status}/>
                                        }
                                    },
                                    {
                                        title: '操作',
                                        dataIndex: 'op',
                                        key: 'op',
                                        align: 'center',
                                        render: (_, record) => {
                                            return (
                                                <span className="op">
                          <a onClick={() => {
                          }}>编辑</a>
                          <a style={{marginLeft: 10}}>删除</a>
                        </span>
                                            )
                                        }
                                    }
                                ]}
                            />
                        </Col>
                    </Row>
                </Col>
            </Row>

            <Modal
                title="新增标签分组"
                open={isModalOpen01}
                onOk={() => {
                    formRef.current.submit()
                    // navigate('/admin/tag/add')
                }}
                onCancel={() => setIsModalOpen01(false)}
                maskClosable={false}
                width={500}
                destroyOnClose
            >
                <Divider/>
                <Form
                    form={form}
                    ref={formRef}
                    onFinish={() => {
                        setIsModalOpen01(false)
                    }}
                    preserve={false}
                >
                    <Form.Item
                        label="标签分组"
                        name="tagName"
                        rules={[
                            {
                                required: true,
                                message: '请输入标签分组'
                            }
                        ]}
                    >
                        <Input placeholder="请输入标签分组名称"/>
                    </Form.Item>
                </Form>
            </Modal>
            <Modal
                title="新增分类"
                open={isModalOpen02}
                onOk={() => {
                    setIsModalOpen02(false)
                    // formRef2.current.submit()
                }}
                onCancel={() => setIsModalOpen02(false)}
                maskClosable={false}
                width={500}
                destroyOnClose
            >
                <Divider/>
                <Form.Item
                    label="标签分类"
                    ref={formRef2}
                    form={form2}
                    name="tagName"
                    rules={[
                        {
                            required: true,
                            message: '请输入标签分类'
                        }
                    ]}
                >
                    <Input placeholder="请输入标签分类名称"/>
                </Form.Item>
            </Modal>
        </>
    )
}
